﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
   <style>
    .layui-table-cell {
        height: auto;
        white-space: normal;
    }

    .avatar-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .employee-form {
        padding: 20px 30px 0 0;
    }

    /* 新增：限制搜索栏和表格的宽度，与校区管理一致 */
    .layui-form.layui-form-pane {
        margin: 0;
    }
    
    /* 确保表格容器不额外增加边距 */
    .layui-table-view {
        margin: 0;
    }
</style>
</head>
<body>
    <!-- 改为直接内容布局，与校区管理完全一致 -->
    <div class="layui-fluid" style="padding: 15px;">

        <!-- 搜索栏 - 移除样式类 -->
        <div style="margin-bottom: 15px;">
            <form class="layui-form" lay-filter="employee-search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="EmpolyName" placeholder="请输入员工姓名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">部门</label>
                        <div class="layui-input-inline">
                            <select name="DeptID">
                                <option value="">全部部门</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-inline">
                            <select name="RoleID">
                                <option value="">全部角色</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <select name="EmpolySex">
                                <option value="">全部性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" class="layui-btn layui-btn-warm" onclick="addEmployee()">添加员工</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 员工表格 - 移除样式类 -->
        <div>
            <table class="layui-hide" id="employeeTable" lay-filter="employeeTable"></table>
        </div>
    </div>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <!-- 添加/编辑员工表单模板 -->
    <script type="text/html" id="employeeFormTemplate">
        <form class="layui-form employee-form" lay-filter="employeeForm">
            <input type="hidden" name="EmpolyID" id="EmpolyID">

            <div class="layui-form-item">
                <label class="layui-form-label">员工编号</label>
                <div class="layui-input-block">
                    <input type="text" name="EmpolyNum" required lay-verify="required|EmpolyNum" placeholder="请输入6位数字员工编号" autocomplete="off" class="layui-input" {{ d.isEdit ? 'readonly' : '' }}>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="EmpolyName" required lay-verify="required" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="EmpolySex" value="男" title="男" checked>
                    <input type="radio" name="EmpolySex" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="EmpolyIdCard" required lay-verify="required|identity" placeholder="请输入18位身份证号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-block">
                    <select name="DeptID" lay-verify="required" lay-search>
                        <option value="">请选择部门</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">岗位级别</label>
                <div class="layui-input-block">
                    <select name="EmpolyLevel">
                        <option value="1">普通员工</option>
                        <option value="2">部门主管</option>
                        <option value="3">校区负责人</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="RoleID" lay-verify="required" lay-search>
                        <option value="">请选择角色</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入职日期</label>
                <div class="layui-input-block">
                    <input type="text" name="InductionDate" id="InductionDate" required lay-verify="required" placeholder="请选择入职日期" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">离职日期</label>
                <div class="layui-input-block">
                    <input type="text" name="DepartureDate" id="DepartureDate" placeholder="请选择离职日期（可选）" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="EmpolyReMark" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </form>
    </script>

    <script src="~/Scripts/jquery-3.7.0.min.js"></script>
    <script src="~/Scripts/layui/layui.js"></script>
    <script>
        var table, form, layer, laydate;

        // 初始化layui模块
        layui.use(['table', 'form', 'layer', 'laydate'], function () {
            table = layui.table;
            form = layui.form;
            layer = layui.layer;
            laydate = layui.laydate;

            // 渲染表格
            var tableIns = table.render({
                elem: '#employeeTable',
                url: '/Empoly/GetEmployeeList',
                method: 'post',
                page: true,
                limit: 10,
                limits: [10, 20, 30, 50],
                cols: [[
                    { field: 'EmpolyID', title: '员工ID', width: 60, sort: true },
                    { field: 'EmpolyNum', title: '员工编号', width: 90, sort: true },
                    { field: 'EmpolyName', title: '姓名', width: 80, sort: true },
                    { field: 'EmpolySex', title: '性别', width: 60, sort: true },
                    { field: 'EmpolyIdCard', title: '身份证号', width: 175 },
                    { field: 'DeptName', title: '部门', width: 80 },
                    { field: 'EmpolyLevel', title: '级别', width: 60 },
                    { field: 'RoleName', title: '角色', width: 100 },
                    {
                        field: 'InductionDate',
                        title: '入职日期',
                        width: 120,
                        templet: function (d) {
                            return d.InductionDate ? new Date(parseInt(d.InductionDate.replace(/[^\d]/g, ''))).toLocaleDateString() : '';
                        }
                    },
                    {
                        field: 'DepartureDate',
                        title: '离职日期',
                        width: 120,
                        templet: function (d) {
                            return d.DepartureDate ? new Date(parseInt(d.DepartureDate.replace(/[^\d]/g, ''))).toLocaleDateString() : '';
                        }
                    },
                    { field: 'EmpolyReMark', title: '备注', width: 150 },
                    { title: '操作', toolbar: '#toolbar', width: 120 }
                ]],
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });

            // 搜索功能
            form.on('submit(search)', function (data) {
                table.reload('employeeTable', {
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听工具条
            table.on('tool(employeeTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    editEmployee(data.EmpolyID);
                } else if (obj.event === 'delete') {
                    deleteEmployee(data.EmpolyID, data.EmpolyName);
                }
            });

            // 加载部门列表
            loadDeptList();
            // 加载角色列表
            loadRoleList();
        });

        // 加载部门列表
        function loadDeptList() {
            $.ajax({
                url: '/Empoly/GetDeptList',
                type: 'POST',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var deptSelect = $('select[name="DeptID"]');
                        deptSelect.empty();
                        deptSelect.append('<option value="">全部部门</option>');
                        $.each(res.data, function (index, item) {
                            deptSelect.append('<option value="' + item.DeptID + '">' + item.DeptName + '</option>');
                        });
                        form.render('select');
                    }
                }
            });
        }

        // 加载角色列表
        function loadRoleList() {
            $.ajax({
                url: '/Empoly/GetRoleList',
                type: 'POST',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var roleSelect = $('select[name="RoleID"]');
                        roleSelect.empty();
                        roleSelect.append('<option value="">全部角色</option>');
                        $.each(res.data, function (index, item) {
                            roleSelect.append('<option value="' + item.RoleID + '">' + item.RoleName + '</option>');
                        });
                        form.render('select');
                    }
                }
            });
        }

        // 添加员工
        function addEmployee() {
            var formHtml = $('#employeeFormTemplate').html();

            var index = layer.open({
                type: 1,
                title: '添加员工',
                content: formHtml,
                area: ['600px', '700px'],
                success: function (layero, index) {
                    // 初始化日期选择器
                    laydate.render({
                        elem: '#InductionDate',
                        format: 'yyyy-MM-dd',
                        value: new Date() // 默认当前日期
                    });
                    laydate.render({
                        elem: '#DepartureDate',
                        format: 'yyyy-MM-dd'
                    });

                    // 加载部门下拉框
                    loadFormDeptList();
                    // 加载角色下拉框
                    loadFormRoleList();

                    // 渲染单选按钮
                    form.render('radio');

                    // 表单验证
                    form.verify({
                        EmpolyNum: function (value) {
                            if (!/^\d{6}$/.test(value)) {
                                return '员工编号必须为6位数字';
                            }
                        },
                        identity: function (value) {
                            if (!/^\d{17}[\dXx]$/.test(value)) {
                                return '身份证号格式不正确';
                            }
                        }
                    });

                    // 监听表单提交
                    form.on('submit(submitBtn)', function (data) {
                        submitEmployeeForm(data.field, 'add');
                        return false;
                    });
                },
                btn: ['保存', '取消'],
                yes: function (index, layero) {
                    // 触发提交按钮
                    $('#submitBtn').click();
                }
            });
        }

        // 编辑员工
        function editEmployee(id) {
            var formHtml = $('#employeeFormTemplate').html();

            var index = layer.open({
                type: 1,
                title: '编辑员工',
                content: formHtml,
                area: ['600px', '700px'],
                success: function (layero, index) {
                    // 初始化日期选择器
                    laydate.render({
                        elem: '#InductionDate',
                        format: 'yyyy-MM-dd'
                    });
                    laydate.render({
                        elem: '#DepartureDate',
                        format: 'yyyy-MM-dd'
                    });

                    // 加载部门下拉框
                    loadFormDeptList();
                    // 加载角色下拉框
                    loadFormRoleList();

                    // 加载员工信息
                    loadEmployeeInfo(id);

                    // 渲染单选按钮
                    form.render('radio');

                    // 表单验证
                    form.verify({
                        EmpolyNum: function (value) {
                            if (!/^\d{6}$/.test(value)) {
                                return '员工编号必须为6位数字';
                            }
                        },
                        identity: function (value) {
                            if (!/^\d{17}[\dXx]$/.test(value)) {
                                return '身份证号格式不正确';
                            }
                        }
                    });

                    // 监听表单提交
                    form.on('submit(submitBtn)', function (data) {
                        submitEmployeeForm(data.field, 'edit');
                        return false;
                    });
                },
                btn: ['保存', '取消'],
                yes: function (index, layero) {
                    // 触发提交按钮
                    $('#submitBtn').click();
                }
            });
        }

        // 加载表单中的部门列表
        function loadFormDeptList() {
            $.ajax({
                url: '/Empoly/GetDeptList',
                type: 'POST',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var deptSelect = $('.employee-form select[name="DeptID"]');
                        deptSelect.empty();
                        deptSelect.append('<option value="">请选择部门</option>');
                        $.each(res.data, function (index, item) {
                            deptSelect.append('<option value="' + item.DeptID + '">' + item.DeptName + '</option>');
                        });
                        form.render('select');
                    }
                }
            });
        }

        // 加载表单中的角色列表
        function loadFormRoleList() {
            $.ajax({
                url: '/Empoly/GetRoleList',
                type: 'POST',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var roleSelect = $('.employee-form select[name="RoleID"]');
                        roleSelect.empty();
                        roleSelect.append('<option value="">请选择角色</option>');
                        $.each(res.data, function (index, item) {
                            roleSelect.append('<option value="' + item.RoleID + '">' + item.RoleName + '</option>');
                        });
                        form.render('select');
                    }
                }
            });
        }

        // 加载员工信息
        function loadEmployeeInfo(id) {
            $.ajax({
                url: '/Empoly/GetEmployeeById',
                type: 'GET',
                data: { id: id },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0 && res.data) {
                        var employee = res.data;
                        form.val('employeeForm', {
                            "EmpolyID": employee.EmpolyID,
                            "EmpolyNum": employee.EmpolyNum,
                            "EmpolyName": employee.EmpolyName,
                            "EmpolySex": employee.EmpolySex,
                            "EmpolyIdCard": employee.EmpolyIdCard,
                            "DeptID": employee.DeptID,
                            "EmpolyLevel": employee.EmpolyLevel,
                            "RoleID": employee.RoleID,
                            "InductionDate": employee.InductionDate ? formatDate(employee.InductionDate) : '',
                            "DepartureDate": employee.DepartureDate ? formatDate(employee.DepartureDate) : '',
                            "EmpolyReMark": employee.EmpolyReMark || ''
                        });

                        // 重新渲染表单确保单选按钮状态正确
                        form.render();
                    } else {
                        layer.msg('加载员工信息失败', { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('加载员工信息失败', { icon: 2 });
                }
            });
        }

        // 提交员工表单
        function submitEmployeeForm(formData, type) {
            var url = type === 'add' ? '/Empoly/AddEmployee' : '/Empoly/UpdateEmployee';

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(type === 'add' ? '添加成功' : '修改成功', { icon: 1 });
                        layer.closeAll();
                        table.reload('employeeTable');
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('请求失败', { icon: 2 });
                }
            });
        }

        // 删除员工
        function deleteEmployee(id, name) {
            layer.confirm('确定要删除员工 "' + name + '" 吗？', function (index) {
                $.ajax({
                    url: '/Empoly/DeleteEmployee',
                    type: 'POST',
                    data: { id: id },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功', { icon: 1 });
                            table.reload('employeeTable');
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('请求失败', { icon: 2 });
                    }
                });
                layer.close(index);
            });
        }

        // 日期格式化函数
        function formatDate(dateString) {
            if (!dateString) return '';
            var date = new Date(parseInt(dateString.replace(/[^\d]/g, '')));
            return date.getFullYear() + '-' +
                ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                ('0' + date.getDate()).slice(-2);
        }
    </script>
</body>
</html>